<!--表单选择组件-->
<template>
  <div>
    <!-- <el-form-item :label="config.label" :rules="config.rules" :label-width="config.labelW" :class="config.formItemClass" :prop="config.name" :style="config.formItemStyle" class="form-ele-cls"> -->
    <el-select ref="selectTreeDom" v-model="form.data.valueTitle" :size="config.size" :disabled="disabled" :filterable="filterable" :class="config.childClass" :placeholder="config.placeholder" :style="config.childStyle || {}">
      <!-- option的 value 必须是字符类型，才能正常显示 label和value -->
      <!-- <el-option v-for="(item) in array" :key="item.value" :label="item.label" :value="''+item.value" /> -->
      <el-option :value="form.data.valueTitle" :label="form.data.valueTitle">
        <!-- eslint-disable-next-line -->
        <el-tree ref="selectTree" :accordion="treeConfig.accordion" :data="treeData" :props="treeConfig.props" :highlight-current="true" :node-key="treeConfig.nodeKey" :default-expand-all="treeConfig.defaultExpandAll" :default-expanded-keys="treeConfig.defaultExpandedKey" icon-class="" @node-click="handleNodeClick" />
      </el-option>
    </el-select>
    <slot name="other" ></slot>
  <!-- </el-form-item> -->
  </div>
</template>

<script>
// import common from '@/utils/open/common'
export default {
  name: 'FormSelectTree',
  props: {
    // 参数设置
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          label: '下拉框',
          name: 'select',
          placeholder: '请选择下拉框',
          rules: [
            { required: true, message: '请选择下拉框', trigger: 'change' }
          ],
          array: [],
          disabled: false
        }
      }
    },
    /**
     * tree 配置选项，具体看下表
     */
    treeConfig: {
      type: Object,
      default () {
        return {
          props: {
            value: 'value', // ID字段名
            label: 'label', // 显示名称
            children: 'children' // 子级字段名
          },
          accordion: false, // 是否每次只打开一个同级树节点展开
          defaultExpandedKey: [], // 默认展开的节点的 key 的数组
          nodeKey: 'id',
          defaultExpandAll: true // 是否默认展开所有节点

        }
      }
    },
    treeData: {
      type: Array,
      default () {
        return []
      }
    },
    // 能否编辑
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否能过滤
    filterable: {
      type: Boolean,
      required: false,
      default: false
    },
    data: {
      type: [String, Number],
      required: false,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form: {
        data: {
          valueId: this.value, // 初始值
          valueTitle: ''
        }
      },
      array: []
    }
  },
  computed: {
    selectStyleObj () {
      const obj = this.styleObj
      let labelW = 0
      if (!this.$validate.isNull(this.config.labelW)) {
        labelW = parseInt(this.config.labelW)
      }
      if (this.styleObj && !this.validate.isNull(this.styleObj.width)) {
        const w = parseInt(this.styleObj.width)
        obj.width = w + labelW + 'px'
      }
      return obj
    }
  },
  watch: {
    data: {
      handler (val) {
        this.form.data.valueId = val && val.toString()
      },
      deep: true,
      immediate: true
    },
    treeData: {
      handler(arr) {
        this.$nextTick(() => {
          // 这里递归遍历，为默认选中而写
          if (this.treeData.length > 0) {
            this.recursionArr({ arr: this.treeData, childName: 'children', key: this.treeConfig.nodeKey, isEnd: false, value: this.form.data.valueId }, (item) => {
              this.selectInitData(item)
            })
          }
        })
      },
      deep: true
    },
    config: {
      handler (val) {
        if (val.array.length > 0) {
          this.array = val.array
        } else {
          this.array = []
        }
      },
      deep: true, // 对对象进行深入监听，数组不需要深度监听
      immediate: true // 最初绑定值也执行函数
    }
  },
  methods: {
    // 切换选项
    handleNodeClick (node) {
      this.$refs.selectTreeDom.blur() // 选中收起 面板
      this.selectInitData(node)
    },
    selectInitData(node) {
      const value = node[this.treeConfig.props.value]
      this.$refs.selectTree.setCurrentKey(value) // 设置选中高亮
      this.form.data.valueId = value
      this.form.data.valueTitle = node[this.treeConfig.props.label]
      this.$emit('updateForm', this.config.name, this.form.data.valueId, this.idx, this.config)
      this.$emit('getSelected', this.config.name, node, this.idx)
    },
    reset () {
      this.form.data.valueId = ''
    },
    // 递归tree数据，定位符合元素并返回
    recursionArr (tData, fn) {
      // eslint-disable-next-line
      let { arr, childName, key, isEnd, value } = tData
      for (const obj of arr) {
        const item = childName ? obj[childName] : obj
        // debugger
        if (obj[key] === value) {
          isEnd = true
          fn && fn(obj)
          return isEnd
        } else {
          // debugger
          if (Array.isArray(item) && item.length > 0) {
            const t = this.recursionArr({ arr: item, childName, key, isEnd, value }, fn)
            if (t) {
              return t
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 249px;
  min-width: 380px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}

ul li > .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}

.el-tree-node__label {
  font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
  color: #409eff;
  font-weight: 700;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
  color: #606266;
  font-weight: normal;
}

.el-scrollbar__thumb {
  display: none;
}
.el-input__inner {
  border: 0px;
}
</style>
